<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绿叶学习网</title>
    <link rel="stylesheet" href="test.css">
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script src="test.js"></script>
</head>

<body>
    <header id="header">
        <div id="logo"><a href=""><img src="image\header.png" alt=""></a></div>
        <nav>
            <ul id="nav">
                <li><a href="">首页</a></li>
                <li><a href="">站长的书</a>
                    <ul class="sub_nav">
                        <li><a href=""><i>HTML和CSS基础</i></a></li>
                        <li><a href=""><i>HTML和CSS基础</i></a></li>
                        <li><a href=""><i>HTML和CSS基础</i></a></li>
                        <li><a href=""><i>HTML和CSS基础</i></a></li>
                        <li><a href=""><i>HTML和CSS基础</i></a></li>
                    </ul>
                </li>
                <li><a href="">前端入门</a>
                    <ul class="sub_nav">
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                    </ul>
                </li>

                <li><a href="">前端进阶</a>
                    <ul class="sub_nav">
                        <li><a href=""><i></i>HTML和CSS进阶</a></li>
                        <li><a href=""><i></i>HTML和CSS进阶</a></li>
                        <li><a href=""><i></i>HTML和CSS进阶</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                    </ul>
                </li>
                <li><a href="">网页设计</a>
                    <ul class="sub_nav">
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                    </ul>
                </li>
                <li><a href="">在线工具</a>
                    <ul class="sub_nav">
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                        <li><a href=""><i></i>HTML和CSS基础</a></li>
                    </ul>
                </li>
                <li><a href="">常用下载</a></li>
                <li><a href="">我要出书</a></li>

            </ul>
        </nav>
    </header>
    <main id="main">
        <div id="banner">
          <div id="btn-left"></div>
          <ul id="ul-imgs" style="width:5000px; margin-left:0px;">
            <li><a href="javascript:;"><img src="image/carousel_item/carousel-1.jpg"></a></li>
            <li><a href="javascript:;"><img src="image/carousel_item/carousel-2.jpg"></a></li>
            <li><a href="javascript:;"><img src="image/carousel_item/carousel-3.jpg"></a></li>
            <li><a href="javascript:;"><img src="image/carousel_item/carousel-4.jpg"></a></li>
            <!--注意！最后li个数要比实际图片张数多1，最后一个li里的img是重复第一张li的图片-->
            <li><a href="javascript:;"><img src="image/carousel_item/carousel-1.jpg"></a></li>
          </ul>
          <ul id="ul-idxs">
            <!--虽然li个数比实际图片张数多1，但小圆点的个数不必多1-->
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <div id="btn-right"></div>
        </div>
      </main>
    <div id="wrapper">
        <div class="inner_wrapper">
            <div class="left">
                <header>
                    <h2>工具手册</h2>
                </header>
                <div class="left_nav">
                    <ul>
                        <li><a href="">HTML5参考手册</a></li>
                        <li><a href="">CSS3参考手册</a></li>
                        <li><a href="">JavaScript参考手册</a></li>
                        <li><a href="">jQuery参考手册</a></li>
                        <li><a href="">Bootstrap参考手册</a></li>
                        <li><a href="">HBuilder下载</a></li>
                        <li><a href="">vscode下载</a></li>
                        <li><a href="">Sublime Text 3.0下载</a></li>
                    </ul>
                </div>
            </div>
            <div class="center_box">
                <section class="center_top">
                    <ul>
                        <li class="big_box">
                            <a href="">
                                <div class="big_box_front"></div>
                                <div class="big_box_back">
                                    <h3>站长新书</h3>
                                    <p>html和css进阶</p>
                                </div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">HTML</div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">CSS</div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">JavaScript</div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">jQuery</div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">CSS3</div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">正则</div>
                            </a>
                        </li>
                        <li class="big_box">
                            <a href="">
                                <div class="big_box_front"></div>
                                <div class="big_box_back">
                                    <h3>站长处女座</h3>
                                    <p>html和css基础</p>
                                </div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">JSON</div>
                            </a>
                        </li>
                        <li class="small_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">技巧</div>
                            </a>
                        </li>
                        <li class="middle_box">
                            <a href="">
                                <div class="front"></div>
                                <div class="back">绿叶2.0正式上线</div>
                            </a>
                        </li>

                    </ul>
                </section>
                <section class="center_botten">
                    <ul>
                        <li><a href=""><img src="image\small.png" alt="">
                                <span>在线测试</span></a></li>
                        <li><a href=""><img src="image\small.png" alt="">
                                <span>在线测试</span></a></li>
                        <li><a href=""><img src="image\small.png" alt="">
                                <span>在线测试</span></a></li>
                        <li><a href=""><img src="image\small.png" alt="">
                                <span>在线测试</span></a></li>
                        <li><a href=""><img src="image\small.png" alt="">
                                <span>在线测试</span></a></li>
                        <li><a href=""><img src="image\small.png" alt="">
                                <span>在线测试</span></a></li>
                    </ul>
                </section>
            </div>
            <div class="right">
                <header>
                    <h2>最新动态</h2>
                </header>
                <div class="right_nav">
                    <ul>
                        <li><a href="">绿叶第一本教材正式出版了</a></li>
                        <li><a href="">《JavaScript基础教程》出版啦</a></li>
                        <li><a href="">《HTML5 Canvas开发》来袭</a></li>
                        <li><a href="">《HTML和CSS进阶》出版啦</a></li>
                        <li><a href="">我的处女作出版了！</a></li>
                        <li><a href="">绿叶学习网常见问题解答</a></li>
                        <li><a href="">网站技术，该如何学习？</a></li>
                        <li><a href="">绿叶学习网开张啦</a></li>
                    </ul>

                </div>
            </div>
        </div>
        <section class="junior">
            <header>
                <h2>前端入门</h2>
            </header>
            <div class="junior_list">
                <ul>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                </ul>
            </div>

        </section>
        <section class="senior">
            <header>
                <h2>前端进阶</h2>
            </header>
            <div class="senior_list">
                <ul>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                    <li><a href="">
                            <figure><img src="image\big.png" alt="">
                                <div class="junior_back">
                                    <h3><i>初</i>HTML入门教程</h3>
                                    <p>50000+互联网学者点击学习，超高人气教程</p>

                                </div>
                            </figure>
                        </a></li>
                </ul>
            </div>
        </section>
    </div>
    <script>
        var i=0;//计数用，判断当前li是第几个图片
        var LIWIDTH=1000;//每个li的长度
        var DURATION=500;//时间500毫秒
        var LICOUNT=4;//li数量
        var ulImgs=document.getElementById("ul-imgs");
        var ulIdxs=document.getElementById("ul-idxs");
        var lis=ulIdxs.children;
        //先声明一个控制跳转的函数moveTo
        function moveTo(to){
          if(to==undefined){//不传参时自动跳转下一张
            to=i+1;
          }
          if(i==0){
            if(to>i){//如果是第一张li，向前跳转的话添加上跳转动画
              ulImgs.className="transition";
            }else{//向后跳转移除跳转动画
              ulImgs.className="";
              ulImgs.style.marginLeft=-LIWIDTH*LICOUNT+"px";//使用li的宽乘数量得到外边距，让对的li显示
              setTimeout(function(){
                moveTo(LICOUNT-1);
              },100);
              return;
            }
          }
          i=to;//正常情况下的跳转
          ulImgs.style.marginLeft=-i*LIWIDTH+"px";
          //先设置小圆点都不显示样式，方便用i添加样式
          for(var li of lis){
            li.className=""
          }
          //console.log(i);
          //如何跳转到最后一个图片，自动偷偷转回第一个图片
          if(i==LICOUNT){
            i=0;
            setTimeout(function(){
              ulImgs.className="";
              ulImgs.style.marginLeft=0;
            },DURATION)
          }
          lis[i].className="active";
        }
      </script>
      
      <script>
        //左右按钮代码
        var btnLeft=document.getElementById("btn-left");
        var btnRight=document.getElementById("btn-right");
        var canClick=true;
        btnRight.onclick=function(){
          move(1)
        }
        function move(n){
          if(canClick){
            console.log(i+n);
            moveTo(i+n);
            canClick=false;
            setTimeout(function(){
              canClick=true;
            },DURATION+100);
          }
        }
        btnLeft.onclick=function(){
          move(-1);
        }
      </script>
      <script>
        var interval=3000;//跳转事件
        //自动跳转
        var timer=setInterval(function(){
          moveTo()
        },3000);
        //鼠标移入停止跳转
        var banner=document.getElementById("banner");
        banner.onmouseover=function(){
          clearInterval(timer);
        }
        banner.onmouseout=function(){
          timer=setInterval(function(){
            moveTo()
          },3000);
        }
      </script>
      <script>
        //通过小圆点控制图片
        var ulIdxs=document.getElementById("ul-idxs");
        var canClick=true;
        ulIdxs.onclick=function(e){
          if(canClick){
            var li=e.target;
            if(li.nodeName=="LI"){
              if(li.className!=="active"){
                for(var i=0;i<lis.length;i++){
                  if(lis[i]==li){
                    break;
                  }
                }
                moveTo(i);
                setTimeout(function(){
                  canClick=true;
                },DURATION);
              }
            }
          }
        }
      </script>
</body>

</html>